import { useModel } from "umi";
import { Avatar, Space, Image as AntdImage } from "antd";
import { MinusOutlined, CloseOutlined } from "@ant-design/icons";
import { useEffect } from "react";
import { useReactive } from "ahooks";
import Jdenticon from "react-jdenticon";
import "./main.header.css";

const MessagesHeader = () => {
    const { goipfs } = useModel("global");
    const { applicationInfo, applicationName } = useModel("application.info");
    const { organizationInfo } = useModel("organization.info");
    const { messageInfo } = useModel("message.info");

    const state = useReactive({
        title: "",
    });

    useEffect(() => {
        let appTitle = applicationInfo?.aiName || applicationName;
        let appVer = applicationInfo?.aiVenu || "";
        let orgTitle = organizationInfo?.fullName || "";
        let msgType = (messageInfo?.mmType || "应用") + "消息";
        state.title = msgType + " - " + appTitle + " - " + appVer + " - " + orgTitle;
        document.title = state.title;
    }, [applicationInfo, organizationInfo, messageInfo]);

    const closeClick = () => {
        window.close();
        currentWindow.close();
    };

    const appIcon =
        goipfs?.ipfsUrl && applicationInfo?.atIcon ? (
            <AntdImage width={14} src={goipfs.ipfsUrl + applicationInfo.atIcon} preview={false} style={{ padding: "2px 0 " }} />
        ) : (
            <div style={{ padding: 0 }}>
                <Jdenticon size="18" value={applicationInfo?.aiName || applicationName} />
            </div>
        );

    return (
        <div className="header drag">
            <div style={{ display: "flex", justifyContent: "space-between" }}>
                <Space>
                    <Avatar shape="square" size={20} icon={appIcon} style={{ marginTop: -7, backgroundColor: applicationInfo?.atBgco || "#efefef" }} />
                    <div style={{ height: 35, lineHeight: "30px" }}>{state.title}</div>
                </Space>
                <div className="controls no-drag">
                    <Space size={0}>
                        <a title="最小化当前窗口" onClick={() => currentWindow.minimize()} style={{ lineHeight: "32px" }}>
                            <MinusOutlined />
                        </a>
                        <a title="关闭应用" onClick={closeClick} style={{ lineHeight: "32px" }}>
                            <CloseOutlined />
                        </a>
                    </Space>
                </div>
            </div>
        </div>
    );
};

export default MessagesHeader;
